<script setup lang="ts">
import VIPQuestion from './components/VIPQuestion.vue'
import VIPComment from './components/VIPComment.vue'
import { useComment } from './hooks/useComment'
import { ref } from 'vue'
import WaterFall from '@/components/WaterFall/index.vue'
//模拟数据
const { comments } = useComment()
const vipCards = ref(comments)

//兑换会员码对话框
const VIPdialogVisible = ref(false)
const openDialog = () => {
  VIPdialogVisible.value = true
}
//领取会员弹窗
const receiveVIPdialog = ref(false)
const receiveVIP = () => {
  receiveVIPdialog.value = true
}
</script>

<template>
  <div class="box">
    <!-- 第一行 -->
    <div class="one-row">
      <!-- 列1 -->
      <div class="one-col-box">
        <div class="one-col">
          <!-- 头部 -->
          <div class="col-header">
            <div class="header-left">
              <img src="./images/vip.svg" alt="" />
              <div class="span">尊享永久会员</div>
            </div>
            <div class="header-right" @click="openDialog">兑换码</div>
          </div>
          <!-- title -->
          <div class="title">解锁所有面试题解，一次性买断</div>
          <!-- 价格 -->
          <div class="price">
            <span class="price-one">¥</span>
            <span class="price-two"
              >129
              <div class="price-reduce">限时优惠</div>
            </span>
            <span class="price-three">/永久</span>
            <span class="price-four">¥399</span>
          </div>
          <!-- 按钮 -->
          <div class="btn">立即开通</div>
          <!-- 会员协议 -->
          <div class="agreement">
            开通前请先阅读
            <a href="#">《会员协议》</a>
          </div>
        </div>
      </div>
      <!-- 列2 -->
      <div class="two-col-box">
        <div class="two-col">
          <div class="two-col-header">
            <img class="two-col-img" src="./images/viplevel.svg" alt="" />
            <div class="two-col-title">永久会员专属权益</div>
          </div>
          <div class="two-col-content">
            <div class="content-item"
              >解锁全部（几千道）企业高频面试题及高质量题解，适用于巩固基础技术提升、实习 / 校招 / 社招求职</div
            >
            <div class="content-item"
              >报名参与模拟面试（限时活动） 获取上百套模拟面试视频， >了解大厂面试官出题思路，提升面试通过率
            </div>
            <div class="content-item"
              >加入永久会员交流群，享受专属面试题答疑、优先处理反馈、优先补充你需要的题目题解</div
            >
            <div class="content-item">更多会员专属功能，比如专项练习（笔试题）、回答讨论、沉浸式刷题、创建题目等</div>
          </div>
        </div>
      </div>
    </div>
    <!-- 第二行 -->
    <div class="two-row">
      <div class="two-row-title">限时优惠</div>
      <div class="two-row-content"
        >当前永久会员 最低价 129，正式运营价格预计是 399+，会随着功能和内容的丰富持续涨价，早入手早学习~
        欢迎成为“原始股东”！</div
      >
    </div>
    <!-- 第三行  -->
    <div class="three-row">
      <div class="three-row-title">🎁 面试马 X 路飞学城联合福利</div>
      <div class="three-row-btn" @click="receiveVIP"> 去领取>> </div>
      <div class="three-row-content"
        >面试鸭福利升级！活动期间内，所有面试鸭永久会员均可额外免费领取“路飞学城黑金卡一年会员”，赠送权益包括:</div
      >
      <div class="three-row-footer">
        <div class="footer-item">1. 路飞3000小时互联网全学科，零基到企业级项目课畅学1年</div>
        <div class="footer-item">2. 送50套大厂简历模板，提高你的面试邀约机会</div>
        <div class="footer-item">3. 送不低于30分钟大厂就业老师1对1 职业规划，职场少走弯路</div>
        <div class="footer-item">4. 送零基础4天直播入门答疑课，手把手带入门</div>
        <div class="footer-item"
          >5. 承诺每月更新3-5门课程，Python、GO语言、爬虫、云原生、网络安全、数据分析、人工智能、鸿蒙等技术方向</div
        >
        <div class="footer-item"
          >6. 学习、面试、转行、搞副业、进大厂、搭建知识体系、拓展技术上限......从小白到大神，一张黑金卡就够了</div
        >
      </div>
    </div>
    <!-- 第四行 -->
    <div class="four-row">
      <div class="four-row-title">会员常见问题</div>
      <div class="four-row-content">
        <VIPQuestion></VIPQuestion>
        <VIPQuestion></VIPQuestion>
        <VIPQuestion></VIPQuestion>
      </div>
      <div class="four-row-footer">查看更多常见问题</div>
    </div>
    <!-- 第五行 -->
    <div class="five-row">
      <p class="four-row-title">👀 看看他们都是如何评价面试鸭的 ~</p>
      <p class="four-row-content">用户说好才是真的好</p>
    </div>
    <!-- 第六行 -->
    <div class="six-row">
      <WaterFall :width="380">
        <VIPComment
          v-for="item in vipCards"
          :key="item.name"
          :name="item.name"
          :job="item.job"
          :content="item.content"
        />
      </WaterFall>
    </div>
    <!-- 第七行 -->
    <div class="seven-row">
      <div class="seven-row-btn">开通会员</div>
    </div>
  </div>
  <!-- 兑换会员弹窗 -->
  <el-dialog v-model="VIPdialogVisible" width="500" align-center>
    <template #header>
      <h2>兑换会员</h2>
    </template>
    <el-input placeholder="输入兑换码"></el-input>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="VIPdialogVisible = false">取消</el-button>
        <el-button type="primary" @click="VIPdialogVisible = false">确定</el-button>
      </div>
    </template>
  </el-dialog>
  <!-- 领取会员弹窗 -->
  <el-dialog v-model="receiveVIPdialog" width="500" align-center center>
    <template #header>
      <h2>领取会员</h2>
    </template>
    <el-form>
      <el-form-item label="手机号">
        <el-input placeholder="请输入手机号"></el-input>
      </el-form-item>
      <el-form-item label="验证码">
        <el-input placeholder="请输入验证码"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button round style="width: 50%" type="primary" @click="receiveVIPdialog = false">提交</el-button>
    </template>
  </el-dialog>
</template>

<style lang="scss" scoped>
.box {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  padding: 32px 16px;
  box-sizing: border-box;
}

.one-row {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 20px;
  .one-col-box {
    flex: 0 0 29.166666666666668%;
    max-width: 29.166666666666668%;
    padding: 0 8px;
    box-sizing: border-box;
    //小于768宽度换行
    @media screen and (width<768px) {
      flex: 0 0 100%;
      max-width: 100%;
      margin-bottom: 16px;
    }
    .one-col {
      background: #424039;
      border-radius: 20px;
      padding: 20px 16px;
      box-sizing: border-box;
      .col-header {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;

        .header-left {
          display: flex;
          align-items: center;
          img {
            width: 32px;
            height: 32px;
            margin-right: 8px;
          }
          .span {
            color: #fcefc2;
            font-weight: 400;
            font-size: 20px;
            letter-spacing: 2px;
          }
        }
        .header-right {
          cursor: pointer;
          color: #fcefc2;
          font-size: 12px;
          text-decoration: underline;
        }
      }
      .title {
        letter-spacing: 2px;
        white-space: nowrap;
        font-size: 16px;
        color: #9f9f9f;
        margin-bottom: 16px;
      }
      .price {
        display: flex;
        align-items: end;
        gap: 4px;
        padding-top: 6px;
        margin-bottom: 16px;
        .price-one {
          color: #fcefc2;
          margin-right: 2px;
        }
        .price-two {
          position: relative;
          color: #fcefc2;
          font-size: 40px;
          font-weight: 700;
          line-height: 1;
          .price-reduce {
            position: absolute;
            right: -70px;
            top: -15px;
            background-color: orange;
            padding: 4px 10px;
            box-sizing: border-box;
            color: #fff;
            font-size: 14px;
            border-radius: 8px 0 8px 0;
          }
        }
        .price-three {
          color: #9f9f9f;
          font-size: 16px;
        }
        .price-four {
          color: #9f9f9f;
          font-size: 12px;
          text-decoration: line-through;
        }
      }
      .btn {
        background: #e8cb96;
        width: 100%;
        font-weight: 700;
        border: none;
        cursor: pointer;
        border-radius: 99px;
        padding-block: 6px;
        font-size: 16px;
        text-align: center;
        margin-bottom: 20px;
        &:hover {
          background: #fcefc2;
        }
      }
      .agreement {
        color: #9f9f9f;
        a {
          color: #fcefc2;
        }
      }
    }
  }

  .two-col-box {
    flex: 0 0 70.83333333333334%;
    max-width: 70.83333333333334%;
    padding: 0 8px;
    box-sizing: border-box;
    //小于768宽度换行
    @media screen and (width < 768px) {
      flex: 0 0 100%;
      max-width: 100%;
      margin-bottom: 16px;
    }
    .two-col {
      width: 100%;
      height: 100%;
      border-radius: 20px;
      background: linear-gradient(180deg, #f4f4d0, #fff);
      padding: 20px;
      box-sizing: border-box;
      .two-col-header {
        display: flex;
        align-items: center;
        margin-bottom: 20px;
        gap: 5px;
        .two-col-img {
          width: 24px;
          height: 24px;
        }
        .two-col-title {
          font-size: 21px;
          font-weight: 700;
          white-space: nowrap;
        }
      }

      .two-col-content {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        background-color: #fff;
        border-radius: 8px;
        padding: 10px;
        box-sizing: border-box;
        box-shadow: 0 1rem 1.5rem -0.5rem rgba(0, 0, 0, 0.1);
        .content-item {
          padding: 16px 8px;
          box-sizing: border-box;
          font-size: 14px;
          border-right: 1px solid #0505050f;
          border-bottom: 1px solid #0505050f;
        }
      }
    }
  }
}
.two-row {
  border-radius: 20px;
  background: linear-gradient(180deg, #f4f4d0, #fff);
  padding: 20px 16px;
  margin-bottom: 20px;
  .two-row-title {
    text-align: center;
    font-size: 21px;
    font-weight: 700;
    margin-bottom: 20px;
  }
  .two-row-content {
    font-size: 16px;
    line-height: 1.5;
    color: rgba(0, 0, 0, 0.88);
    margin-bottom: 20px;
  }
}
.three-row {
  position: relative;
  border-radius: 20px;
  background: linear-gradient(180deg, #f4f4d0, #fff);
  padding: 20px 16px;
  margin-bottom: 20px;
  .three-row-title {
    text-align: center;
    font-size: 21px;
    font-weight: 700;
    margin-bottom: 20px;
  }
  .three-row-btn {
    position: absolute;
    right: 16px;
    top: 20px;
    background: #fee896;
    cursor: pointer;
    padding: 4px 12px;
    border-radius: 28px;
    font-weight: 500;
    text-align: center;
    &:hover {
      background: #e5c866;
    }
  }
  .three-row-content {
    font-size: 16px;
    line-height: 1.5;
    color: rgba(0, 0, 0, 0.88);
    margin-bottom: 20px;
  }
  .three-row-footer {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    box-shadow: 0 1rem 1.5rem -0.5rem rgba(0, 0, 0, 0.1);
    background-color: #fff;
    border-radius: 20px;
    margin: 20px 10px;
    .footer-item {
      padding: 16px 8px;
      box-sizing: border-box;
      font-size: 16px;
      border-right: 1px solid #0505050f;
      border-bottom: 1px solid #0505050f;
    }
  }
}
.four-row {
  border-radius: 20px;
  background: linear-gradient(180deg, #f4f4d0, #fff);
  padding: 10px 16px;
  margin-bottom: 20px;
  .four-row-title {
    text-align: center;
    font-size: 21px;
    font-weight: 700;
    margin-bottom: 20px;
  }
  .four-row-content {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 30px;
  }
  .four-row-footer {
    text-align: center;
    font-size: 14px;
    color: #1677ff;
    cursor: pointer;
    margin-bottom: 20px;
  }
}
.five-row {
  margin-bottom: 20px;
  .four-row-title {
    color: rgba(0, 0, 0, 0.88);
    font-weight: 600;
    font-size: 24px;
    text-align: center;
  }
  .four-row-content {
    color: rgba(0, 0, 0, 0.45);
    font-size: 20px;
    text-align: center;
  }
}
.six-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-bottom: 20px;
  // 小于768宽度换行
  @media screen and (width < 768px) {
    flex-direction: column;
  }
  .six-row-content {
    flex: 0 0 32.33333333333333%;
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 20px;
  }
}
.seven-row {
  width: 60%;
  margin: 60px auto;
  .seven-row-btn {
    background: linear-gradient(145deg, #604d43, #2e2927);
    color: #f0e6d1;
    border-radius: 50px;
    padding: 15px 24px;
    text-align: center;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    &:hover {
      transform: translateY(-1px);
      box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.2);
    }
  }
}
</style>
